<template>
  <div class="warning-container">
    <!-- 查询区域 -->
    <div class="search-container">
      <span class="search-label">一体杆名称：</span>
      <el-input clearable placeholder="请输入一体杆名称" class="search-main" v-model="params.poleName" @clear="search"></el-input>
      <span class="search-label">一体杆编号：</span>
      <el-input clearable placeholder="请输入一体杆编号" class="search-main" v-model="params.poleNumber" @clear="search"></el-input>
      <span class="search-label">处置状态：</span>
      <el-select v-model="params.handleStatus">
        <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button type="primary" class="search-btn" @click="search">查询</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="list">
        <el-table-column type="index" label="序号" :index="indexMethod"/>
        <el-table-column label="一体杆名称" prop="poleName"/>
        <el-table-column label="一体杆编号" prop="poleNumber"/>
        <el-table-column label="故障类型" prop="errorType"/>
        <el-table-column label="处置状态" prop="handleStatus" :formatter="formatRule"/>
        <el-table-column label="告警时间" prop="warningTime"/>
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="mini" type="text" disabled="true">派单</el-button>
            <el-button size="mini" type="text" @click="$router.push('//rodWarnDetail')">详情</el-button>
            <el-button size="mini" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-container">
        <!-- @current-change切换页码用的 -->
          <el-pagination
            layout="total, prev, pager, next"
            :total="total"
            :page-size="params.pageSize"
          />
      </div>
  </div>
</template>
<script>
import { RodWarningListAPI } from '@/api/rod-warning'
export default {
  name: 'Warning',
  data() {
    return {
      list: [],
      params: {
        page: 1,
        pageSize: 5,
        poleName: '',
        poleNumber: '',
        handleStatus: ''
      },
      total: 0,
      statusList: [
        { label: '未派单', value: 0 },
        { label: '已派单', value: 1 },
        { label: '已接单', value: 2 },
        { label: '已完成', value: 3 }
      ]
    }
  },
  created() {
    this.RodWarningList()
  },
  methods: {
    //查询
    search() {
      this.params.page = 1
      this.RodWarningList()
    },
    //状态转换
    formatRule(row, column, cellValue) {
      const rule = this.statusList.find(item => item.value === cellValue)
      return rule ? rule.label : ''
    },
    //计算序号
    indexMethod(index) {
      return (this.params.page - 1) * this.params.pageSize + index + 1
    },
    //获取告警列表
    async RodWarningList() {
      const res = await RodWarningListAPI(this.params)
      this.list = res.data.rows
      this.total = res.data.total
    }
  }
}
</script>
<style lang="scss" scoped>
.warning-container {
  padding: 20px;
  background-color: #fff;
}
.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn{
    margin-left:20px;
  }
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
</style>
